<template>
  <div class="login-page-wrapper">
    <div class="login-box-wrapper">
      <news-page-header>注册</news-page-header>
      <!--隐藏的提示文字-->
      <div class="alert-shadow" v-show="notetype">
        <div class="alert-content" v-text="msg"></div>
      </div>
      <!---->
      <div class="header-wrapper">
        <img :src="require('@/assets/img/icon/logo.png')" class="logo-img" />
      </div>
      <header class="box-title">用户账号注册</header>
      <div class="passport-box input-box">
        <div class="passport-content content">
          <input
            autocomplete="off"
            type="text"
            class="passport"
            v-model.trim="regUsername"
            @blur="checkName"
          />
          <i class="cancel" v-show="regUsername.length" @click="clearUser"></i>
        </div>
        <div class="note" v-show="!regUsername.length">请输入用户名/6-12位字母、数字、汉字</div>
      </div>
      <div class="passport-box input-box">
        <div class="passport-content content">
          <input
            autocomplete="off"
            type="tel"
            class="passport"
            v-model.trim="regPhone"
            @blur="checkPhone"
          />
          <i class="cancel" v-show="regPhone.length" @click="clearPhone"></i>
        </div>
        <div class="note" v-show="!regPhone.length">请输入11位手机号码</div>
      </div>
      <div class="password-box input-box">
        <div class="password-content content">
          <input
            autocomplete="off"
            type="password"
            class="password"
            v-model.trim="regPassword1"
            @blur="checkPassword1"
          />
          <i class="cancel" v-show="regPassword1.length" @click="clearPassword1"></i>
        </div>
        <div class="note" v-show="!regPassword1.length">请输入密码/字母开头/6-12位字母、数字</div>
      </div>
      <div class="password-box input-box">
        <div class="password-content content">
          <input
            autocomplete="off"
            type="password"
            class="password"
            v-model.trim="regPassword2"
            @blur="checkPassword2"
          />
          <i class="cancel" v-show="regPassword2.length" @click="clearPassword2"></i>
        </div>
        <div class="note" v-show="!regPassword2.length">请确认输入的密码</div>
      </div>
      <!---->
      <div class="should-know">
        <span class="checkbox knew" @click="toChangeInputColor" v-if="isAgree">
          <em>L</em>
        </span>
        <span class="checkbox" @click="toChangeInputColor" v-else>
          <em>L</em>
        </span>
        <span data-spm="law-links" class="content">
          我已阅读并同意
          <a href="#" data-spm-data="1">服务协议</a>
          和
          <a href="#" data-spm-data="2">手机搜狐隐私政策</a>
        </span>
      </div>
      <div class="start-use active" v-if="isStrat" @click="reg">注册账号</div>
      <div class="start-use" v-else>注册账号</div>

      <div data-spm="method" class="switch-and-forget">
        <div class="switch-method" @click="toLogin">
          <i class="icon i-switch"></i>账号密码登录
        </div>
      </div>
      <div data-spm="third-login" class="third-method">
        <div class="logo-list">
          <div data-spm-acode="8650" class="logo qq" data-spm-data="1"></div>
          <div data-spm-acode="8653" class="logo weibo" data-spm-data="2"></div>
          <!---->
        </div>
        <div data-spm-acode="8651" class="help" data-spm-data="3">
          <a href="#" target="_blank" data-spm-data="4">帮助中心</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/css/registerCss/register.css";
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      notetype: false,
      isAgree: true,
      isStrat: false,
      regUsername: "",
      regPhone: "",
      regPassword1: "",
      regPassword2: "",
      msg: "",
      userIsOk: false,
      phoneIsOk: false,
      password1IsOk: false,
      password2IsOk: false
    };
  },
  components: {
    newsPageHeader
  },
  methods: {
    toLogin() {
      this.$router.push({ name: "login" });
    },
    clearUser() {
      this.regUsername = "";
      this.userIsOk = false;
      this.isAgree = false;
    },
    clearPhone() {
      this.regPhone = "";
      this.phoneIsOk = false;
      this.isAgree = false;
    },
    clearPassword1() {
      this.regPassword1 = "";
      this.password1IsOk = false;
      this.isAgree = false;
    },
    clearPassword2() {
      this.regPassword2 = "";
      this.password2IsOk = false;
      this.isAgree = false;
    },
    toChangeInputColor() {
      this.isAgree = !this.isAgree;
      if (
        this.isAgree &&
        this.userIsOk &&
        this.phoneIsOk &&
        this.password1IsOk &&
        this.password2IsOk
      ) {
        this.isStrat = true;
      }
    },
    async checkName() {
      let reg = /^[\u4E00-\u9FA5A-Za-z0-9_]{6,12}$/;
      if (!reg.test(this.regUsername)) {
        this.msg = "请输入正确格式的用户名";
        this.notetype = true;
        this.userIsOk = false;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      } else {
        this.notetype = false;
        this.msg = "";
        let { data } = await this.$axios.get(
          "http://localhost:9394/users/checkname",
          {
            params: {
              username: this.regUsername
            }
          }
        );
        // window.console.log(data);
        if (data.type) {
          //可以注册
          this.notetype = true;
          this.msg = data.msg;
          this.userIsOk = true;

          setTimeout(() => {
            this.notetype = false;
          }, 2000);
        } else {
          //不能注册
          this.notetype = false;
          this.msg = data.msg;
          this.userIsOk = false;

          setTimeout(() => {
            this.notetype = false;
          }, 2000);
        }
      }
    },
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/; // 最新手机号正则

      if (!reg.test(this.regPhone)) {
        this.msg = "请输入正确格式的手机号码";
        this.notetype = true;
        this.phoneIsOk = false;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      } else {
        this.msg = "";
        this.notetype = false;
        this.phoneIsOk = true;
      }
    },
    checkPassword1() {
      let reg = /^[a-zA-Z][0-9a-zA-Z]{5,11}$/;

      if (!reg.test(this.regPassword1)) {
        this.msg = "请输入正确格式的密码";
        this.notetype = true;
        this.password1IsOk = false;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      } else {
        this.msg = "";
        this.notetype = false;
        this.password1IsOk = true;
      }
    },
    checkPassword2() {
      if (this.regPassword2 != this.regPassword1) {
        this.msg = "两次密码不一致，请正确输入";
        this.notetype = true;
        this.password2IsOk = false;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      } else {
        this.msg = "";
        this.notetype = false;
        this.password2IsOk = true;
      }
    },
    async reg() {
      //注册功能
      if (
        this.isAgree &&
        this.userIsOk &&
        this.phoneIsOk &&
        this.password1IsOk &&
        this.password2IsOk &&
        this.regUsername &&
        this.regPhone &&
        this.regPassword1 &&
        this.regPassword2
      ) {
        let { data } = await this.$axios.post(
          "http://localhost:9394/users/reg",
          {
            username: this.regUsername,
            password: this.$md5(this.regPassword2),
            phone: this.regPhone
          }
        );
        window.console.log(data);
        if (data.type) {
          //注册成功跳转到登陆页把用户名带过去
          this.regUsername = "";
          this.regPhone = "";
          this.regPassword1 = "";
          this.regPassword2 = "";

          this.msg = "注册成功，即将跳转";
          this.notetype = true;

          setTimeout(() => {
            this.notetype = false;
            this.$router.push({ name: "login" });
          }, 2000);
        } else {
          this.msg = "注册失败，请正确输入";
          this.notetype = true;

          setTimeout(() => {
            this.notetype = false;
          }, 2000);
        }
      } else {
        this.msg = "填写有误，请正确输入";
        this.notetype = true;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.isAgree = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
